<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">



  <meta name="description" content="WebSocket+Flask实现即时弹幕系统--开篇"/>




  <meta name="keywords" content="flask, websocket, 八一" />



  <meta name="baidu-site-verification" content="HhUstaSjr0" />



  <meta name="google-site-verification" content="UA-102975942-1" />






  <link rel="alternate" href="/atom.xml" title="八一">




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=2.6.0" />



<link rel="canonical" href="https://bay1.top/2018/03/08/WebSocket-Flask实现即时弹幕系统-开篇/"/>


<link rel="stylesheet" type="text/css" href="/css/style.css?v=2.6.0" />
<link rel="stylesheet" type="text/css" href="/css/prettify.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/sons-of-obsidian.css" media="screen" />



  <link rel="stylesheet" type="text/css" href="/lib/fancybox/jquery.fancybox.css" />




  
  <script id="baidu_analytics">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?9a885cc9fb6cd7bcef579deb8efe8a70";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>



  <script id="google_analytics">
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-102975942-1', 'auto');
        ga('send', 'pageview');
  </script>










    <title> WebSocket+Flask实现即时弹幕系统--开篇 - 八一 </title>
  </head>

  <body><div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/." class="logo">八一</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    
      <a href="/archives">
        <li class="mobile-menu-item">
          
          
            文章
          
        </li>
      </a>
    
      <a href="/tags">
        <li class="mobile-menu-item">
          
          
            标签
          
        </li>
      </a>
    
      <a href="/about">
        <li class="mobile-menu-item">
          
          
            关于/友链
          
        </li>
      </a>
    
      <a href="/search">
        <li class="mobile-menu-item">
          
          
            站内搜索
          
        </li>
      </a>
    
  </ul>
</nav>

    <div class="container" id="mobile-panel">
      <header id="header" class="header"><div class="logo-wrapper">
  <a href="/." class="logo">八一</a>
</div>

<nav class="site-navbar">
  
    <ul id="menu" class="menu">
      
        <li class="menu-item">
          <a class="menu-item-link" href="/archives">
            
            
              文章
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/tags">
            
            
              标签
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/about">
            
            
              关于/友链
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/search">
            
            
              站内搜索
            
          </a>
        </li>
      
    </ul>
  
</nav>

      </header>

      <main id="main" class="main">
        <div class="content-wrapper">
          <div id="content" class="content">
            
  
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">
        
          WebSocket+Flask实现即时弹幕系统--开篇
        
      </h1>

      <div class="post-meta">
        <span class="post-time">
          2018-03-08
        </span>
        
        
        
      </div>
    </header>

    
    
  <div class="post-toc" id="post-toc">
    <h2 class="post-toc-title">文章目录</h2>
    <div class="post-toc-content">
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#为什么要做这个东西？？"><span class="toc-text">为什么要做这个东西？？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#大致的思路？？"><span class="toc-text">大致的思路？？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#为什么选择WebSocket和Flask"><span class="toc-text">为什么选择WebSocket和Flask??</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#目前简单的例子"><span class="toc-text">目前简单的例子</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#对于以后的几个思考？？-以后来补或者写以后博客里"><span class="toc-text">对于以后的几个思考？？(以后来补或者写以后博客里)</span></a></li></ol>
    </div>
  </div>


    <div class="post-content">
      
        <p>自从过年开始就消沉到了开学,每天不知道在忙啥,稀里糊涂做点事情就睡觉了<br>开学了,是时候重新拾起想做的一个东西了–弹幕系统<a id="more"></a></p>
<h2 id="为什么要做这个东西？？"><a href="#为什么要做这个东西？？" class="headerlink" title="为什么要做这个东西？？"></a>为什么要做这个东西？？</h2><p>事情说起来有些尴尬…..上一次元旦晚会,工作室要出技术支持下晚会弹幕<br>上一届学长也没有留下他们具体的措施,就在网上找了下,某部门还要求关注公众号发弹幕<br>找到了某某微信墙,本来想懒省事,不在造轮子了,最后开场了才发现有人数限制…..<br>真的很气,回到寝室就决定在下次元旦之前搞出一个微信扫码的弹幕系统<br>以后应该也都是工作室出技术支持这个弹幕</p>
<blockquote>
<p>寒假由于工作室另几个网站要完善一下,然后过年之后也没做很多工作<br>这个想法,就耽搁到了现在,不着急,下次元旦还有好久…….</p>
</blockquote>
<h2 id="大致的思路？？"><a href="#大致的思路？？" class="headerlink" title="大致的思路？？"></a>大致的思路？？</h2><p><img src="https://s1.ax1x.com/2018/03/08/925ukT.png" alt="flow"></p>
<blockquote>
<p>在开学之初草草搞了下上图的大致流程,打算采用WebSocket和Flask结合<br>想的是想把基础的功能完成以后,再拓展其他方面,比如根据弹幕数权重抽奖等<br>整个流程主要是对弹幕内容的检测,没有危险内容就可以直接通过WebSocket即时发送到show页面<br>没有新消息的时候,取数据库中显示次数比较少的弹幕随机读出到屏幕</p>
</blockquote>
<p>其余就是后台的构建,以及与微信开发接口结合的部分<br>用户发送方面打算采用微信小程序的方式,给用户提供发送界面</p>
<h2 id="为什么选择WebSocket和Flask"><a href="#为什么选择WebSocket和Flask" class="headerlink" title="为什么选择WebSocket和Flask??"></a>为什么选择WebSocket和Flask??</h2><blockquote>
<p>浅显的一个实时性连接,延迟小,同时数据包头的修改,开销也很小等<br>而且发现它可以不考虑跨域,后来查到因为webSocket协议没有同源限制<br>(而且前些时候WebSocket很火,对于做弹幕这种东西实时性也正符合吧)</p>
</blockquote>
<p>至于Flask,一开始做web开发就是用的这个框架,后来在Miguel Grinberg大神博客发现了Flask-SocketIO<br>哇,正符合我想要搞的这个东西,感觉Flask完成这个东西还是足以的</p>
<h2 id="目前简单的例子"><a href="#目前简单的例子" class="headerlink" title="目前简单的例子"></a>目前简单的例子</h2><p><img src="https://s1.ax1x.com/2018/03/08/92IZgH.png" alt="文件布局"></p>
<p>弹幕内容滚动部分,还是不想造轮子了,用了<a href="https://github.com/yaseng/jquery.barrager.js" target="_blank" rel="noopener">yaseng/jquery.barrager.js</a><br>弹幕show页面就少了很多麻烦,目前模仿Flask-SocketIO官方文档完成基本发送模块</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">   <span class="comment">//index.js文件监听index.html的发送事件</span></span><br><span class="line">   <span class="keyword">var</span> socket = io.connect();</span><br><span class="line"></span><br><span class="line">   socket.on(<span class="string">'connect'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">       socket.emit(<span class="string">'connect_event'</span>, &#123;</span><br><span class="line">           data: <span class="built_in">encodeURI</span>(<span class="string">'连接成功！'</span>)</span><br><span class="line">       &#125;);</span><br><span class="line">   &#125;)</span><br><span class="line"></span><br><span class="line">   $(<span class="string">'form#emit'</span>).submit(<span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">       socket.emit(<span class="string">'client_event'</span>, &#123;</span><br><span class="line">           data: <span class="built_in">encodeURI</span>($(<span class="string">'#emit_data'</span>).val())</span><br><span class="line">       &#125;);</span><br><span class="line">       <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">   &#125;);</span><br><span class="line"></span><br><span class="line">   <span class="comment">//run.py中定义事件名并发送消息</span></span><br><span class="line">   @newSocket.on(<span class="string">'client_event'</span>)</span><br><span class="line">def client_msg(msg):</span><br><span class="line">   	print(msg)</span><br><span class="line">   	newSocket.emit(<span class="string">'server_response'</span>, &#123;<span class="string">'data'</span>: msg[<span class="string">'data'</span>]&#125;)</span><br><span class="line"></span><br><span class="line">@newSocket.on(<span class="string">'connect_event'</span>)</span><br><span class="line">def connected_msg(msg):</span><br><span class="line">   	print(msg)</span><br><span class="line">   	newSocket.emit(<span class="string">'server_response'</span>, &#123;<span class="string">'data'</span>: msg[<span class="string">'data'</span>]&#125;)</span><br><span class="line"></span><br><span class="line">   <span class="comment">//show.js中监听response并根据弹幕滚动插件显示到屏幕</span></span><br><span class="line">   <span class="keyword">var</span> socket = io.connect();</span><br><span class="line"></span><br><span class="line">   socket.on(<span class="string">'server_response'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">msg</span>) </span>&#123;</span><br><span class="line">       <span class="keyword">var</span> item = &#123;</span><br><span class="line">           img: <span class="string">'static/images/haha.gif'</span>, <span class="comment">//图片,微信接口授权后为用户头像</span></span><br><span class="line">           info: <span class="built_in">decodeURI</span>(msg.data), <span class="comment">//文字</span></span><br><span class="line">           close: <span class="literal">true</span>, <span class="comment">//显示关闭按钮 </span></span><br><span class="line">           speed: <span class="number">12</span>, <span class="comment">//延迟,单位秒,默认6</span></span><br><span class="line">           <span class="comment">// bottom: 500, //距离底部高度,单位px,默认随机 </span></span><br><span class="line">           <span class="comment">// box_color: '', //气泡背景颜色,默认灰色</span></span><br><span class="line">           <span class="comment">// color: '#' + Math.floor(Math.random() * 0xffffff).toString(16), //颜色,默认粉红</span></span><br><span class="line">           old_ie_color: <span class="string">'#000000'</span>, <span class="comment">//ie低版兼容色,不能与网页背景相同,默认黑色 </span></span><br><span class="line">       &#125;</span><br><span class="line">       $(<span class="string">'body'</span>).barrager(item);</span><br><span class="line">   &#125;);</span><br></pre></td></tr></table></figure>
<p><img src="https://s1.ax1x.com/2018/03/08/925LNT.png" alt="效果"></p>
<h2 id="对于以后的几个思考？？-以后来补或者写以后博客里"><a href="#对于以后的几个思考？？-以后来补或者写以后博客里" class="headerlink" title="对于以后的几个思考？？(以后来补或者写以后博客里)"></a>对于以后的几个思考？？(以后来补或者写以后博客里)</h2><ul>
<li>既然是弹幕系统,读取的时候是不是要做缓存？</li>
<li>对于抽奖,根据弹幕数做权重进行随机的算法？？(以前的那个项目实际意义上并不是真正的权重随机)</li>
<li>数据库查询方面,应该要做些优化,以及取数据的时候的一些循环和List的使用。</li>
<li>微信小程序的未知迷坑…..</li>
</ul>
<p>参考链接:<br>    <a href="https://segmentfault.com/a/1190000011686448" target="_blank" rel="noopener">一些样式参考</a></p>

      
    </div>

    
      
      



      
      
    

    
      <footer class="post-footer">
        
          <div class="post-tags">
            
              <a href="/tags/flask/">flask</a>
            
              <a href="/tags/websocket/">websocket</a>
            
          </div>
        
        
        
  <nav class="post-nav">
    
      <a class="prev" href="/2018/03/11/WebSocket-Flask实现即时弹幕系统-实现微信扫码登录/">
        <i class="iconfont icon-left"></i>
        <span class="prev-text nav-default">WebSocket+Flask实现即时弹幕系统--实现微信扫码登录</span>
        <span class="prev-text nav-mobile">上一篇</span>
      </a>
    
    
      <a class="next" href="/2018/02/08/vue中axios如何实现token验证/">
        <span class="next-text nav-default">vue中axios如何实现token验证</span>
        <span class="prev-text nav-mobile">下一篇</span>
        <i class="iconfont icon-right"></i>
      </a>
    
  </nav>

      </footer>
    

  </article>


          </div>
          
  <div class="comments" id="comments">
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div> 
    </div>
  </div>


        </div>
      </main>

      <footer id="footer" class="footer">

  <div class="social-links">
    
      
        
          <a href="https://github.com/bay1" class="iconfont icon-github" title="github"></a>
        
      
    
      
        
          <a href="http://weibo.com/3190704711/profile?topnav=1&wvr=6&is_all=1" class="iconfont icon-weibo" title="weibo"></a>
        
      
    
      
    
      
    
      
    
    
    
  </div>


<div class="copyright">
  <span class="copyright-year">
    
    &copy; 
     
      2016 - 
    
    2018
    <span class="author">bay1</span>
  </span>
</div>
      </footer>

      <div class="back-to-top" id="back-to-top">
        <i class="iconfont icon-up"></i>
      </div>
    </div>

    
  
  <script type="text/javascript">
    var disqus_config = function () {
        this.page.url = 'https://bay1.top/2018/03/08/WebSocket-Flask实现即时弹幕系统-开篇/';
        this.page.identifier = '2018/03/08/WebSocket-Flask实现即时弹幕系统-开篇/';
        this.page.title = 'WebSocket+Flask实现即时弹幕系统--开篇';
    };
    (function() {
    var d = document, s = d.createElement('script');

    s.src = '//https-blog-flywinky-top-1.disqus.com/embed.js';

    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();  
  </script>



    
  





  
    <script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
  

  
    <script type="text/javascript" src="/lib/slideout/slideout.js"></script>
  

  
    <script type="text/javascript" src="/lib/fancybox/jquery.fancybox.pack.js"></script>
  


    <script type="text/javascript" src="/js/src/even.js?v=2.6.0"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=2.6.0"></script>
<script src="/js/prettify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('pre').addClass('prettyprint');
   prettyPrint();
 })
</script>
  </body>
</html>
